﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>DEMO</title>
<script type="text/javascript" src="js/apiv1.3.min.js"></script>
<!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script-->
<link rel="stylesheet" type="text/css" href="bmap.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
</head>
<body>
	<div class="place">
		<span>位置：</span>
		<ul class="placeul">
			<li><a href="#">首页</a>
			</li>
			<li><a href="#">塔杆管理</a>
			</li>
			<li><a href="#">塔杆信息</a>
			</li>
		</ul>
	</div>

	<div
		style="width:100%;height:80%;border:1px solid gray;position:absolute;"
		id="container"></div>
		<div
		style="width:60%;height:90%;position:absolute;"
		id="container"></div>
		<div id="addRoute" style="position:absolute;top:40px;left:73%;">
		路线名称:<input type="text" id="lxmc" class="dfinput" style="width:80px;" /><br />
		路线ID:<input type="text" id="lxid" class="dfinput" style="width:80px;" /><br />
		电压:<input type="text" id="lxdy" class="dfinput" style="width:80px;" /><br />
		<input type="button"  class="btn"  value="设置起始杆塔" id="btn_start"
			onclick="setStart()" /><span id="startNO"></span><br /> <input
			type="button"  class="btn"   value="设置终止杆塔" id="btn_end" onclick="setEnd()" /><span
			id="endNO"></span><br /> <input type="button" class="btn" value="设置杆塔集合"
			id="set_polies" onclick="setPolies()" /><br /> <span
			id="add_polies"></span> <br> <span id="route_length"></span><br>
		<input type="button"   class="btn"  id="btn_addRoute" value="添加" disabled="disabled"
			onclick="addRouteLine()" /><span></span><br>
			<input type="button"   class="btn"  id="addpole" value="添加杆塔"
		onclick="addPoleBefore()" />
			

	</div>
</body>
</html>
<script type="text/javascript">
	var mapOptions = {
		mapType : BMAP_NORMAL_MAP,
		maxZoom : 10, //地图最大层级
		minZoom : 5
	}
	var map = new BMap.Map("container", mapOptions); //设置卫星图为底图BMAP_PERSPECTIVE_MAP
	var initPoint = new BMap.Point(116.404, 39.915); // 创建点坐标

	map.centerAndZoom(initPoint, 8); // 初始化地图,设置中心点坐标和地图级别。
	map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
	map.enableKeyboard(); // 启用键盘操作。  
	map.enableContinuousZoom(); //启用连续缩放效果

	// ----- control -----
	map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
	map.addControl(new BMap.ScaleControl()); //显示比例尺在右下角
	/*
	map.addControl(new BMap.OverviewMapControl({
		anchor : BMAP_ANCHOR_TOP_RIGHT,
		isOpen : true
	})); //缩略图控件
	*/

	// ----- Hide or Show Pole -----
	map.addEventListener("zoomend", function() {
		var overlays = map.getOverlays();
		for ( var i = 0; i < overlays.length - 1; i++) {
			if (overlays[i]._config.icon) {
				if (overlays[i]._config.icon.imageUrl.indexOf("images/circle")!=-1) {
					if (map.getViewport().zoom <= 7) {
						overlays[i].hide();
					} else {
						overlays[i].show();
					}
				}
			}
		}
	});

	// ---- contextMenu ---- //添加右键菜单

	//context
	//map.addContextMenu(contextMenu);

	// ----- maker -----    // 创建杆塔
	/*
	 addPole(116.404,39.915,"北京");
	 addPole(115.473787,38.864847,"保定");
	 addPole(116.005009,39.487764,"涿州");
	 addPole(115.876228,39.346843,"高碑店市");
	 addPole(115.814137,39.262867,"定兴县");
	 addPole(115.699154,39.028273,"徐水县");
	

	 addPole(116.642015,39.912344,"通州");
	 addPole(116.697207,39.541203,"廊坊");
	 addPole(117.196234,39.139401,"天津");
	
	 */
	/*
	 // 添加路线
	 addRoute([
	 new BMap.Point(116.404,39.915),
	 new BMap.Point(116.005009,39.487764),
	 new BMap.Point(115.876228,39.346843),
	 new BMap.Point(115.814137,39.262867),
	 new BMap.Point(115.699154,39.028273),
	 new BMap.Point(115.473787,38.864847),

	 ],"北京-保定");

	 addRoute([
	 new BMap.Point(116.404,39.915),
	 new BMap.Point(116.642015,39.912344),
	 new BMap.Point(116.697207,39.541203),
	 new BMap.Point(117.196234,39.139401),

	 ],"北京-天津");*/

	function addPole(lng, lat, opts,color) {
		var point = new BMap.Point(lng, lat);
		var myIcon = new BMap.Icon("images/circle"+color+".png", new BMap.Size(16, 16));

		var marker = new BMap.Marker(point, {
			icon : myIcon,
			enableDragging : false,
			draggingCursor : "move",
			title : opts
		});
		/*	var contextMenu = new BMap.ContextMenu();
			contextMenu.addItem("删除杆塔", function() {
				alert("del");
			});
			marker.addContextMenu(contextMenu);
		 */
		marker.addEventListener("mouseover", function(type, target, point,
				pixel) {
			var x = type.pixel.x;
			var y = type.pixel.y;
			$("body").append("<div id =\"routeDiv\"></div>")
			routeDiv = $("#routeDiv").css("position", "absolute").css("top", y)
					.css("left", x).css("z-index", 1);
			routeDiv.html("<span style=\"font-size:12px;font-weight:bolder\">"
					+ opts + "</span>");
		});
		marker.addEventListener("mouseout", function() {
			if (routeDiv) {
				routeDiv.remove();
			}
		});
		var contextMenu = new BMap.ContextMenu();
		contextMenu.addItem(new BMap.MenuItem("删除杆塔",function(e){
									if(confirm("是否要删除杆塔:"+opts)){
										$.post("pole!delPole.action",{id:opts},function(data){
											
										var json = eval("("+data+")");
											switch(json.code){
												case 1: alert("删除成功!");
															map.removeOverlay(marker);//清除
														break;
												default : alert("删除失败!");
											}
										});
									}
									;},{width:55}
				));
		marker.addContextMenu(contextMenu);
		/*
		marker.addEventListener("dragging", function(e) {
			document.getElementById("position").innerHTML = "x :" + e.pixel.x + " y :" + e.pixel.y + "<br>lng: " + e.point.lng + " lat: " + e.point.lat;
		}); */
		map.addOverlay(marker);
		return marker;
	}
	var routeDiv;
	function addRoute(points, opts, color) {

		var polyline = new BMap.Polyline(points, {
			strokeColor : color,
			strokeWeight : 3,
			strokeOpacity : 0.8
		});
		polyline.addEventListener("mouseover", function(type, target, point,
				pixel) {
			var x = type.pixel.x;
			var y = type.pixel.y;
			$("body").append("<div id =\"routeDiv\"></div>")
			routeDiv = $("#routeDiv").css("position", "absolute").css("top", y)
					.css("left", x).css("z-index", 1);
			routeDiv.html("<span style=\"font-size:12px;font-weight:bolder\">"
					+ opts + "</span>");
		});
		polyline.addEventListener("mouseout", function() {
			if (routeDiv) {
				routeDiv.remove();
			}
		});
		map.addOverlay(polyline);
	}
	function addPoleBefore() {
		if ($("#addpole").val() == "取消添加") {
			map.removeEventListener("click", clicked);
			$("#addpole").val("添加杆塔");
		} else {
			map.addEventListener("click", clicked);
			$("#addpole").val("取消添加");
		}
	}
	function setStart() {
		$("#btn_end").attr("disabled", true);
		map.addEventListener("click", start_click);
	}
	function setEnd() {
		map.addEventListener("click", end_click);
	}
	function setPolies() {
		if($("#set_polies").val()=="设置完毕"){
			map.removeEventListener("click", add_polies_click);
			$("#set_polies").attr("disabled",true);
			$("#btn_addRoute").attr("disabled",false);
			return;
		}
		map.addEventListener("click", add_polies_click);
		$("#set_polies").val("设置完毕");

	}
	
	var add_polyLine;
	function add_polies_click(type) {
		if (type.overlay) {
		var title = type.overlay._config.title;
		if(title==$("#startNO").html()||title==$("#endNO").html()){//不能是起点或终点
			return;
		}
			if (confirm("确定将:" + title + "添加到该线路中吗？")) {
				var html = $("#add_polies").html();
				if (html == "") {
					html =title;
				} else {
					var arr = html.split("<br>");
					for ( var i = 0; i < arr.length; i++) {
						if (arr[i] ==title) {//不能重复
							return;
						}
					}
					html += "<br>" + title;
				}
				$("#add_polies").html(html);
				$("#route_length").html(calc_length(html));//计算长度
				add_drawRouteLine(html);//画线

			}
		}
	}
	function add_drawRouteLine(html){
		map.removeOverlay(add_polyLine);
		var spoint = getPointByPointTitle($("#startNO").html());//获取起点point
		var epoint = getPointByPointTitle($("#endNO").html());//获取终点point
		var arr = html.split("<br>");
		var points = new Array(arr.length+2);
		points[0]=spoint;
		for(var i =0 ; i<arr.length;i++){
			points[i+1]=getPointByPointTitle(arr[i]);
		}
		points[points.length-1]=epoint;
		
		add_polyLine =  new BMap.Polyline(points, {
					strokeColor : "blue",
					strokeWeight : 3,
					strokeOpacity : 0.8
				});
		map.addOverlay(add_polyLine);

			
		
	}
	
	function calc_length(html) {
		var arr = html.split("<br>");
		var spoint = getPointByPointTitle($("#startNO").html());//获取起点point
		var epoint = getPointByPointTitle($("#endNO").html());//获取终点point
		var length = 0;
		if(arr.length>1){
			length=map.getDistance(spoint,getPointByPointTitle(arr[0]));
			
			for(var m = 1;m<arr.length;m++){
				length+=map.getDistance(getPointByPointTitle(arr[m-1]),getPointByPointTitle(arr[m]));
			}
			
			length +=map.getDistance(getPointByPointTitle(arr[arr.length-1]),epoint);
			
		}else{
			length=map.getDistance(spoint,epoint);
		}
		length =(length/1000)+"";
		var tmp = length.split(".");
		length = tmp[0]+"."+tmp[1].substring(0,3)+"公里";
		
		return length;	
	}
	function getPointByPointTitle(title){
		var overlays = map.getOverlays();
			for ( var i = 0; i < overlays.length ; i++) {
			if (overlays[i]._config) {
				if (overlays[i]._config.title==title) {
					return overlays[i]._config.point;
				}
			}
		}
	}
	function end_click(type) {
		if (confirm("确定将:" + type.overlay._config.title + "设置为终止杆塔吗？")) {
			$("#endNO").html(type.overlay._config.title);
			map.removeEventListener("click", end_click);
			$("#btn_end").attr("disabled", true);
			$("#set_polies").attr("disabled",false);
		}
	}
	function start_click(type) {
		if (confirm("确定将:" + type.overlay._config.title + "设置为起始杆塔吗？")) {
			$("#startNO").html(type.overlay._config.title);
			map.removeEventListener("click", start_click);
			$("#btn_start").attr("disabled", "disabled");
			$("#btn_end").attr("disabled", false);
		}
	}
	function clicked(type) {

		var marker = addPole(type.point.lng, type.point.lat, "添加的杆塔","");

		if (confirm("确定在此位置添加杆塔?")) {
			var no = prompt("请输入杆塔编号");
			if (no == "") {
				map.removeOverlay(marker);
				return;
			}
			$.post("pole!add.action", {
				"pole.id" : no,
				"pole.lng" : type.point.lng,
				"pole.lat" : type.point.lat,
				"pole.state" : 1
			}, function(data) {
			var json = eval("("+data+")");
				switch (json.code) {
				case 1:
					map.removeOverlay(marker);
					alert("添加成功");
					marker = addPole(type.point.lng, type.point.lat, no,"");
					break;
				default:
					alert("添加失败");
					map.removeOverlay(marker);
					break;
				}
			});
		//	map.removeEventListener("click", clicked);
		} else {
			map.removeOverlay(marker);
		}
	}

	$.post("pole!findList.action", function(data) {
		var polies = eval("("+data+")");
		var arr=["","_red","_yellow"];
		for ( var i = 0; i < polies.length; i++) {
			addPole(polies[i].lng, polies[i].lat, polies[i].id,arr[i%3]);
		}
	});
//findAllPolies
	$.post("route!findAllPolies.action",function(data){
			var json = eval("("+data+")");
			for(var i=0;i<json.length;i++){
				var polies = json[i];
				var points = new Array();
				var name = "";
				var points1 = new Array();
				for ( var x = 0; x < polies.length; x++) {
					points[x] = new BMap.Point(polies[x].lng,polies[x].lat);
					name = polies[x].routeName;
				}
				addRoute(points, name, "green");
  				var meter = 0;
				for ( var m = 1; m < points.length; m++) {
					meter += map.getDistance(points[m - 1],points[m]);
				}
			}
	});

/*
	$.post("route!findList.action?"+Math.random(), function(data) {
		var routies = data

		for ( var i = 0; i < routies.length; i++) {
			if (routies[i]) {
				$.post("route!findPoliesByCid.action?"+Math.random(), {
					"cid" : routies[i].id
				},
						function(data) {
							var polies = data

							var points = new Array();
							var name = "";
							var points1 = new Array();
							for ( var x = 0; x < polies.length; x++) {
								points[x] = new BMap.Point(polies[x].lng,
										polies[x].lat);
								name = polies[x].routeName;
							}
							addRoute(points, name, "green");
							var meter = 0;
							for ( var m = 1; m < points.length; m++) {
								meter += map.getDistance(points[m - 1],
										points[m]);
							}
							//alert(name+"长度为:"+meter+"米");

						});
			}
		}
	});*/
	
	
	function addRouteLine(){
	var ids=$("#startNO").html()+","+$("#add_polies").html().split("<br>").join(",")+","+$("#endNO").html();

	
		$.post("route!addCircuitry.action",{
		"poleIds":ids,
		"circuitry.length":$("#route_length").html(),
		"circuitry.name": $("#lxmc").val(),
		"circuitry.id": $("#lxid").val(),
		"circuitry.voltage" :$("#lxdy").val(),
		"circuitry.poleByEndpoleNo.id" :$("#endNO").html(),
		"circuitry.poleByStartpoleNo.id" :$("#startNO").html()
		},function(data){
		var json = eval("("+data+")");
			switch(json.code){
				case 1: alert("添加成功!");location.href="demo.html";break;
				default : alert("添加失败");
				
			}
		});
	}
	$(function() {
		$("#btn_start").attr("disabled", false);
		$("#btn_end").attr("disabled", true);
		$("#set_polies").attr("disabled",true);
		$("#btn_addRoute").attr("disabled",true);
		
	});
</script>
